<template>
  <div @click="click">
    <el-icon v-if="isFullscreen" style="transform: scale(1.6) translateY(2px);margin-right: 10px;">
      <Crop/>
    </el-icon>
    <el-icon v-else style="transform: scale(1.6) translateY(2px);margin-right: 10px;">
      <FullScreen/>
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import screenfull from 'screenfull'
import {onBeforeUnmount, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {FullScreen, Crop} from '@element-plus/icons-vue';

const isFullscreen = ref(false);
onMounted(() => {
  init();
})
onBeforeUnmount(() => {
  destroy();
})

function click() {
  if (!screenfull.isEnabled) {
    ElMessage({message: '你的浏览器不支持全屏', type: 'warning', grouping: true, showClose: true});
    return false
  }
  screenfull.toggle()
}

function change() {
  //@ts-ignore
  isFullscreen.value = screenfull.isFullscreen
}

function init() {
  if (screenfull.isEnabled) {
    //@ts-ignore
    screenfull.on('change', change)
  }
}

function destroy() {
  if (screenfull.isEnabled) {
    //@ts-ignore
    screenfull.off('change', change)
  }
}
</script>

<style scoped>

</style>